<template>
  <bm-overlay
    ref="customOverlay"
    :class="{sample: true, active}"
    pane="labelPane"
    @draw="draw"
    >
    <div class="map_bubble__1OYGO" @touchstart="detailsFn(item)">
      <p class="text">{{ item.label }}</p>
      <p class="count">{{ item.count }}套</p>
    </div>
  </bm-overlay>
</template>

<script>
export default {
  props: ['text', 'position', 'active', 'mapList', 'item'],
  data () {
    return {
    }
  },
  methods: {
    draw ({ el, BMap, map }) {
      const { lng, lat } = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    detailsFn (item) {
      this.$emit('details', item)
      console.log(111)
    }
  },
  watch: {
    position: {
      handler () {
        this.$refs.customOverlay.reload()
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
  .text{
    color: #fff;
    font-size: 16px;
  }
  .count{
    font-size: 16px;
    margin-top: -8px;
  }
</style>
